<template>
  <div class="add_con">
    <div class="self_info">
      <div class="info_line info_all">
        <div class="grid_info">
          <div class="left">录入日期：</div>
          <div class="right">{{ formData.createTime }}</div>
        </div>
      </div>
      <div class="info_line info_all">
        <div class="grid_info">
          <div class="left">录入部门：</div>
          <div class="right">{{ formData.orgName }}</div>
        </div>
      </div>
      <div class="info_line info_all">
        <div class="grid_info">
          <div class="left">姓名：</div>
          <div class="right">{{ formData.userName }}</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_cell">
          <div class="left">会议类型：</div>
          <div class="right cell_li">
            <van-radio-group v-model="formData.meetingType" direction="horizontal" :disabled="isEdit">
              <van-radio name="1">内部会议</van-radio>
              <van-radio name="2">外部会议</van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info tips">
          注：内部会议由部门内人员参会，外部会议为跨部门会议，参会人员为全局人员，提交后需上级领导审批。
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_input">
          <div class="left">
            <span>*</span>
            会议主题：
          </div>
          <div class="right">
            <van-field
              class="scroe_input"
              v-model="formData.meetingName"
              rows="3"
              autosize
              type="textarea"
              :placeholder="'请输入会议主题'"
              maxlength="100"
              show-word-limit />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_input">
          <div class="left">会议议程：</div>
          <div class="right">
            <van-field
              class="scroe_input"
              v-model="formData.meetingContent"
              rows="5"
              autosize
              type="textarea"
              :placeholder="'请输入会议议程'"
              maxlength="300"
              show-word-limit />
          </div>
        </div>
      </div>

      <div class="info_line">
        <div class="grid_info info_cell">
          <div class="left">
            <span>*</span>
            会议开始时间：
          </div>
          <div class="right cell_li" @click="chooseTimeDuty('0')">
            <van-cell
              :value="formData.startTime ? formData.startTime.slice(0, -3) : '选择时间'"
              is-link
              :class="{ no_choose: !formData.startTime }" />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_cell">
          <div class="left">
            <span>*</span>
            会议结束时间：
          </div>
          <div class="right cell_li" @click="chooseTimeDuty('1')">
            <van-cell
              :value="formData.endTime ? formData.endTime.slice(0, -3) : '选择时间'"
              is-link
              :class="{ no_choose: !formData.endTime }" />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_cell">
          <van-button icon="plus" type="info" @click="chooseRoom" size="small">选择会议室</van-button>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_cell">
          <div class="left">
            <span>*</span>
            会议地点：
          </div>
          <div class="right cell_li">
            <van-field
              class="scroe_input"
              v-model="formData.meetingPlace"
              :placeholder="'请输入'"
              @input="placeInput" />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_cell">
          <div class="left">会议来源：</div>
          <div class="right cell_li">
            <van-field class="scroe_input" v-model="formData.meetingResource" :placeholder="'请输入'" />
          </div>
        </div>
      </div>

      <div class="info_line">
        <div class="grid_info info_cell">
          <div class="left">会议资料：</div>
          <div class="right cell_li">
            <ImgUpload v-bind:albumList.sync="formData.enclosureList" />
          </div>
        </div>
      </div>

      <div class="info_line">
        <div class="grid_info info_cell">
          <div class="left">
            <span>*</span>
            参会人员：
          </div>
          <div class="right cell_li" @click="chooseAttendance">
            <van-cell :value="attendancePerson || '请选择'" is-link :class="{ no_choose: !attendancePerson }" />
          </div>
        </div>
      </div>
    </div>
    <div class="fead_boot">
      <van-button type="info" @click="cancleMeet()" plain>取消会议</van-button>
      <van-button type="info" @click="saveData('3')">审批通过</van-button>
    </div>
    <van-popup v-model="showTimeDuty" position="bottom">
      <div class="pop_days">
        <van-datetime-picker
          v-model="currentDays"
          type="datetime"
          @cancel="showTimeDuty = false"
          @confirm="timeConfirm"
          :filter="filter" />
      </div>
    </van-popup>
    <van-popup v-model="showAttendUser" position="bottom" round>
      <div class="attendancePerson">已选择：{{ attendancePerson }}</div>
      <van-tree-select
        :items="userOptions"
        :active-id.sync="attendUserList"
        :main-active-index.sync="activeIndex"
        @click-item="clickItem('click')" />
      <div class="btn">
        <div class="cancle" @click="attendCancel">取消</div>
        <div class="confirm" @click="attendConfirm">确定</div>
      </div>
    </van-popup>

    <van-popup class="popu_picker" v-model="showRoom" position="bottom">
      <van-picker
        show-toolbar
        visible-item-count="4"
        :columns="roomOptions"
        default-index="0"
        @cancel="showRoom = false"
        @confirm="onConfirmRoom" />
    </van-popup>
  </div>
</template>

<script>
import {
  getGroupUserList,
  getMeetingDetail,
  getMeetingRoomList,
  checkRoomAndTimeAuthority,
  editMeeting,
  cancelMeeting,
} from '@api/api-meet.js'
import ImgUpload from '@com/ImgUpload'
import moment from 'moment'
export default {
  name: 'MeetingAddPage',
  components: {
    ImgUpload,
  },
  data() {
    return {
      moment: moment,
      userInfo: JSON.parse(localStorage.userInfo),
      operateType: this.$route.query.operateType,
      formData: {
        id: '',
        createTime: moment().format('YYYY-MM-DD'),
        userName: JSON.parse(localStorage.userInfo).userName,
        orgName: JSON.parse(localStorage.userInfo).loginPostInfo.orgName,
        meetingType: '1',
        meetingName: '',
        meetingContent: '',
        startTime: '',
        endTime: '',
        meetingPlace: '',
        meetingRoomId: '',
        meetingPlaceType: '2',
        meetingResource: '',
        enclosureList: [],
        participantsList: [],
        meetingStatus: '0',
      },
      showTimeDuty: false,
      currentDays: new Date(), // 日期
      userOptions: [],
      showAttendUser: false,
      attendUserList: [],
      attendancePerson: '',
      activeIndex: 0,
      allUserList: [],
      isEdit: true,
      shortAttendanceLlist: [],
      shortAttendancePerson: '',
      radioType: '1',
      showRoom: false,
      roomOptions: [],
      timeType: '',
    }
  },
  watch: {},
  created() {
    if (this.$route.query.id) {
      this.getDetail()
    }
    this.getUser('2')
    this.getMeetingRoomList()
  },
  mounted() {},
  destroyed() {},
  methods: {
    chooseTimeDuty(type) {
      this.timeType = type
      this.showTimeDuty = true
    },
    timeConfirm(value) {
      if (this.timeType === '0') {
        this.formData.startTime = moment(value).format('YYYY-MM-DD HH:mm:00')
      } else {
        this.formData.endTime = moment(value).format('YYYY-MM-DD HH:mm:00')
      }
      this.showTimeDuty = false
    },
    getUser(type) {
      const orgId = type === '2' ? 'all' : this.userInfo.loginPostInfo.orgId
      getGroupUserList({ orgId }).then(res => {
        const arr = type === '2' ? res.data.slice(1) : res.data
        const arr1 = []
        // 级联选择器设置disabled
        arr.forEach(item => {
          item.id = item.orgId
          item.text = item.orgName
          if (item.userList.length) {
            item.userList.forEach(li => {
              li.id = li.userId
              li.text = li.userName
            })
            item.children = item.userList
            item.userList.forEach(li => {
              li.orgId = item.orgId
              li.orgName = item.orgName
            })
            arr1.push(...item.userList)
          }
        })
        this.allUserList = arr1
        this.userOptions = arr
      })
    },
    clickItem(type) {
      this.attendancePerson = ''
      const arrs = []
      this.attendUserList.forEach(item1 => {
        const arr = this.allUserList.filter(li => {
          return li.userId === item1
        })
        arrs.push(arr[0].userName)
      })
      this.attendancePerson = arrs.join(',')
    },
    attendConfirm() {
      const that = this
      that.showAttendUser = false
    },
    attendCancel() {
      this.attendancePerson = this.shortAttendancePerson
      this.attendUserList = this.shortAttendanceLlist
      this.showAttendUser = false
    },
    chooseAttendance() {
      this.shortAttendanceLlist = this.attendUserList
      this.shortAttendancePerson = this.attendancePerson
      this.showAttendUser = true
    },
    saveData() {
      // 提交信息判断
      if (!this.formData.meetingName || this.formData.meetingName.trim().length === 0) {
        return this.$toast.fail('会议主题不能为空')
      }
      if (!this.formData.startTime || !this.formData.endTime) {
        return this.$toast.fail('会议时间不能为空')
      }
      if (!this.formData.meetingPlace) {
        return this.$toast.fail('会议地点不能为空')
      }
      if (!this.attendancePerson) {
        return this.$toast.fail('参会人员不能为空')
      }

      this.formData.meetingStatus = '1'
      const arr = []
      this.attendUserList.forEach(item => {
        const list = this.allUserList.filter(li => {
          return li.userId === item
        })
        arr.push({
          userId: list[0].userId,
          userName: list[0].userName,
          orgId: list[0].orgId,
          orgName: list[0].orgName,
        })
      })
      this.formData.participantsList = arr
      if (moment(this.formData.startTime).format('YYYYMMDDHHmmss') < moment().format('YYYYMMDDHHmmss')) {
        this.$dialog
          .confirm({
            message: '会议开始时间小于当前时间，确定要提交吗？',
          })
          .then(() => {
            this.submitData()
          })
          .catch()
      } else {
        this.submitData()
      }
    },
    submitData() {
      if (this.formData.meetingRoomId) {
        const param = {
          endTime: this.formData.endTime,
          meetingId: this.formData.id || '',
          roomId: this.formData.meetingRoomId,
          roomName: this.formData.meetingPlace,
          startTime: this.formData.startTime,
        }
        checkRoomAndTimeAuthority(param).then(res => {
          if (res.code === 0 && res.data === '1') {
            this.submitMeet()
          } else {
            this.$toast.fail(res.data)
          }
        })
      } else {
        this.submitMeet()
      }
    },
    submitMeet() {
      editMeeting(this.formData).then(res => {
        if (res.code === 0) {
          this.$toast.success('审批成功')
          setTimeout(() => {
            this.$router.go(-1)
          }, 500)
        }
      })
    },
    getDetail() {
      getMeetingDetail({ id: this.$route.query.id }).then(res => {
        if (res.code === 0) {
          const data = res.data
          this.formData = Object.assign(this.formData, data)
          this.formData.createTime = data.createTime
          this.formData.orgName = data.createByOrg
          this.formData.userName = data.createBy
          if (this.formData.participantsList.length) {
            const arr = []
            const arr1 = []
            this.formData.participantsList.forEach(item => {
              arr.push(item.userId)
              arr1.push(item.userName)
            })
            this.attendUserList = arr
            this.attendancePerson = arr1.join(',')
          }
        }
      })
    },
    onConfirmRoom(val) {
      this.showRoom = false
      this.isRoomChoose = true
      this.formData.meetingPlace = val.text
      this.formData.meetingRoomId = val.value
      this.formData.meetingPlaceType = '1'
    },
    chooseRoom() {
      if (!this.roomOptions.length) {
        return this.$toast.fail('单位会议室尚未添加，请联系管理员添加会议室后进行选择。')
      }
      this.showRoom = true
    },
    getMeetingRoomList() {
      getMeetingRoomList({
        date: '',
        meetingId: '',
      }).then(res => {
        if (res.code === 0) {
          const arr = []
          res.data.forEach(item => {
            arr.push({
              value: item.roomId,
              text: item.roomName,
            })
          })
          this.roomOptions = arr || []
        }
      })
    },
    filter(type, options) {
      if (type === 'hour') {
        return options.filter(option => option >= 8 && option <= 20)
      }
      if (type === 'minute') {
        if (moment(this.currentDays).format('HH') === '20') {
          return options.filter(option => Number(option) === 0)
        } else {
          return options.filter(option => option % 30 === 0)
        }
      }
      return options
    },
    placeInput() {
      if (!this.isRoomChoose) {
        this.formData.meetingRoomId = ''
        this.formData.meetingPlaceType = '2'
      } else {
        this.isRoomChoose = false
      }
    },
    cancleMeet() {
      this.$dialog
        .confirm({
          title: '提示',
          message: '确定要取消会议?',
        })
        .then(() => {
          cancelMeeting({ id: this.formData.id }).then(res => {
            if (res.code === 0) {
              this.$toast.success('取消成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 300)
            }
          })
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.add_con {
  padding: 3px 12px 70px;
  background-color: #f0f0f0;
  font-size: 14px;
  color: #333333;
  width: 100%;
  overflow-x: hidden;
  height: 100%;
  overflow-y: auto;
  .self_info {
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    margin-top: 16px;
  }
  .info_line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e4e4e4;
    .grid_info {
      display: flex;
      align-items: center;
      padding: 7px 0;
      .left {
        display: flex;
        align-items: center;
        margin-right: 5px;
        span {
          color: #d9001b;
        }
      }
    }
    .info_input,
    .info_cell {
      flex: 1;
      .right {
        flex: 1;
      }
      .cell_li {
        .van-cell__value {
          text-align: right;
        }
        .up_box_img {
          padding-top: 0;
          padding-bottom: 0;
        }
        .no_choose {
          color: #333333;
          .van-cell__value {
            color: #333333;
          }
        }
        .van-radio-group {
          justify-content: space-around;
        }
        /deep/.van-radio--disabled {
          .van-icon {
            background-color: #ffffff;
          }
          .van-radio__label--disabled {
            color: #323233;
          }
          .van-radio__icon--checked {
            .van-icon {
              background-color: #0080ff;
            }
            .van-icon::before {
              color: #ffffff;
            }
          }
        }
      }
    }
    .info_input {
      align-items: flex-start;
      .left {
        margin-top: 3px;
      }
    }
    .tips {
      color: #d9001b;
      font-size: 12px;
    }
  }
  .info_all {
    .grid_info {
      flex: 1;
      justify-content: space-between;
    }
  }
  .instruction_list,
  .feedback_list {
    background-color: #e9eff48f;
    margin-top: 6px;
    .info_line {
      border-bottom: 0;
      padding: 0 7px;
      .info_detail {
        flex: 1;
        justify-content: space-between;
        border-top: 1px solid #d2d2d2;
      }
    }
    .feedback_annex {
      .grid_info {
        flex: 1;
      }
      .right {
        flex: 1;
        /deep/.up_box_img {
          padding: 0;
          .up_file_li {
            margin-top: 0;
            margin-bottom: 6px;
          }
        }
      }
    }
  }
  .van-button {
    height: 36px;
  }
  .check_main {
    background-color: #ffffff;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;
    .type_title_bold {
      font-size: 15px !important;
      color: #333333;
      font-weight: 600;
    }
  }
  /deep/.van-popup {
    padding: 10px;
    .attendancePerson {
      width: 100%;
      display: flex;
      flex-direction: column;
      margin-bottom: 7px;
      font-size: 15px;
      line-height: 25px;
    }
    // .van-dialog__content {
    //   padding: 10px;
    // }
    .van-sidebar {
      width: 50%;
      min-width: 50%;
    }
    .van-tree-select__nav {
      .van-tree-select__nav-item {
        padding: 10px;
        line-height: 10px;
        @include ellipsis;
      }
    }
    .van-tree-select__content {
      width: 100%;
      .van-tree-select__item {
        width: 100%;
        padding: 10px;
        line-height: 10px;
        .van-tree-select__selected {
          transform: translateY(-50%);
          position: absolute;
        }
      }
    }
    .btn {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 18px;
      width: 100%;
      color: #323233;
      div {
        width: 50%;
        text-align: center;
        height: 40px;
        line-height: 40px;
      }
      .confirm {
        color: #ee0a24;
      }
    }
  }
}
</style>
